<template>
  <div class="order-mng">
    <CellGroup>
      <Field
        :model-value="OrderStatus[params.status]"
        is-link readonly clickable
        name="orderStatus" class="query"
        placeholder="订单状态"
        @click="params.showPicker = true">
      </Field>
      <div class="gap-10" />
      <Field v-model="params.orderNo"
        class="query" name="orderNo"
        autocomplete="off" placeholder="订单号" />
      <div class="gap-10" />
      <Field v-model="params.realName"
        class="query" name="realName"
        autocomplete="off" placeholder="真实姓名" />
    </CellGroup>

    <Button type="primary" block
      :loading="state.loading"
      @click="fetchData">搜索</Button>

    <div class="order-container">
      <OrderItemBox v-for="order in state.data"
        :key="order.customOrderNo" :order="order"
        @handle-del="handleDel" />
      <SkeletonCard v-if="state.loading" />
      <Empty description="暂无数据"
        v-if="!state.loading && !state.data.length" />
    </div>

    <Popup v-model:show="params.showPicker" round
      position="bottom" destroy-on-close
      style="height: 60%;"
      :safe-area-inset-bottom="true"
      @click-close-icon="params.showPicker = false">
      <Picker :columns="[
        { text: '全部', value: OrderStatus.全部 },
        { text: '成功', value: OrderStatus.成功 },
        { text: '处理中', value: OrderStatus.处理中 },
        { text: '失败', value: OrderStatus.失败 },
      ]" @cancel="params.showPicker = false"
        @confirm="onConfirmFaceValue"
        :visible-option-num="8"
        :loading="state.loading">
      </Picker>
    </Popup>
  </div>
</template>
<script setup lang="ts">
import {
  Button, CellGroup, Empty, Field,
  Picker,
  Popup,
  showConfirmDialog,
} from 'vant';

import SkeletonCard from '@/components/SkeletonCard.vue';

import OrderItemBox from '../components/OrderItemBox.vue';
import { OrderStatus } from '../const';
import useOrderList from '../hooks/useOrderList';
import type OrderItem from '../models/OrderItem';

const {
  params,
  state, fetchData, handleUpdate,
} = useOrderList();

const handleDel = (order: OrderItem) => {
  showConfirmDialog({
    message: '确定要删除订单吗？',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(async () => {
    await handleUpdate(order);
    fetchData();
  });
};

const onConfirmFaceValue = (e: any) => {
  params.value.status = e.selectedOptions[0].value;
  params.value.showPicker = false;
};
</script>
<style lang="less" scoped>
.order-mng {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
  gap: 10px;

  .query {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .order-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;

    :deep(.van-card__content>div:first-child) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      height: 100%;
    }

    :deep(.van-card__bottom) {
      display: flex;
      align-items: center;

      .van-card__num {
        flex-grow: 1;
      }
    }

    .tags {
      display: flex;
      align-items: center;
      flex-grow: 1;
      gap: 5px;
    }

  }

  .actions {
    display: flex;
    align-items: center;
  }
}
</style>
